<template>
  <div class="home">
    <div class="sidebar">
      <ul>
        <li>
          <router-link to="/">首页</router-link>
        </li>
        <li>
          <router-link to="/auth">权限管理</router-link>
        </li>
        <li>
          <router-link to="/menu">菜单管理</router-link>
        </li>
      </ul>
    </div>
    <main>
      <header>
        <h1>LOGO-{{$store.getters.wrappedUname}}</h1>
      </header>

      <router-view></router-view>
    </main>
  </div>
</template>

<script>
export default {
  mounted () {
    console.log(this)
  }
}
</script>

<style>
a {
  text-decoration: none;
}
li {
  height: 40px;
  line-height: 40px;
  text-align: center;
}
.home {
  display: flex;
}
.sidebar {
  height: 100vh;
  width: 250px;
  background-color: skyblue;
}
main {
  flex: 1;
  height: 100vh;
  background-color: rgb(12, 148, 60);
}
h1 {
  height: 60px;
  line-height: 60px;
  background-color: orange;
  text-align: center;
}
</style>
